<template>
  <div class="login">
    <div class="logo">
      <img src="../../static/imgs/logo.png" alt="">
    </div>
    <div class="title">
      <img src="../../static/imgs/title.png" alt="">
    </div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm2" class="form">
      <el-form-item prop="pass">
        <el-input placeholder="请输入账号" type="text" v-model="ruleForm.userName" auto-complete="off">
          <i slot="prefix" class="el-input__icon"><img src="../../static/imgs/account.png" alt=""></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input placeholder="请输入密码" type="password" v-model="ruleForm.password" auto-complete="off">
          <i slot="prefix" class="el-input__icon"><img src="../../static/imgs/pwd.png" alt=""></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm2')" style="width: 100%; background-color: #D3411D; border: none;" :disabled="logining">立即投资</el-button>
      </el-form-item>
    </el-form>
    <div class="footer">
      —— 本活动最终解释权归红塔期货曲靖营业部所有 ——
    </div>
  </div>
</template>

<script>
import { requestURL } from '@/config'
import axios from 'axios'

export default {
  name: 'Login',
  data () {
    const validateUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        if (this.ruleForm2.checkPass !== '') {
          this.$refs.ruleForm2.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      logining: false,
      ruleForm: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [
          { validator: validateUserName, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      const _this = this
      _this.logining = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post(`${requestURL}/login/?userName=${_this.ruleForm.userName}&password=${_this.ruleForm.password}`).then(response => {
            if (response.data) {
              _this.$router.push({path: `/transaction/${_this.ruleForm.userName}`})
            } else {
              _this.$message.error('账号或密码错误，请重试')
            }

            _this.logining = false
          }).catch(() => {
            _this.logining = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>
.login {
  position: relative;
  height: 100%;
  background: url('../../static/imgs/bg.png') top right no-repeat #e94b21;
  background-size: 100% auto;
}
.login .title {
  position: absolute;
  top: 1.8885rem;
  left: 1.1114rem;
  width: 7.9167rem;
}
.login .title img {
  width: 100%;
  display: block;
}
.login .form {
  position: absolute;
  top: 9.153rem;
  left: 1.111rem;
  width: 7.733rem;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0.373rem;
  box-shadow: 0 5px 3px #d72d01;
}
.login .el-input input {
  background-color: #f5f5f5;
}
.login .el-input__icon {
  line-height: 43px;
}
.login .el-input__icon img {
  width: 16px;
  display: inline-block;
}
.login .footer {
  position: absolute;
  bottom: 0.227rem;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
}
.login .logo {
  position: absolute;
  top: 0.347rem;
  left: 7.707rem;
  width: 1.613rem;
}
.login .logo img {
  width: 100%;
  display: block;
}
</style>
